
<template >
  <div class="lyricRoot">
    <div class="placeholder"></div>
    <div
      class="lyricItem"
      :class="{'curLyr':lyrIdx -1 ===i }"
      v-for="(v,i) in lyric"
      :key="i"
    >{{v[1]}}</div>
    <div class="placeholder"></div>
  </div>
</template>

<script>
let lyricEl = null,
  listEl = null,
  height = 0;
export default {
  props: {
    lyric: {
      type: Array,
      default() {
        return [];
      }
    },
    isMusicDetailCardShow: {
      type: Boolean,
      default() {
        return false;
      }
    }
  },
  data() {
    return {
      lyrIdx: 0
    };
  },
  computed: {
    len() {
      return this.lyric.length;
    }
  },
  created() {
    this.$bus.$on("musicEnd", this.musicEnd);
  },
  destroyed() {
    console.log("lyricEl = null;");
    lyricEl = null;
    this.$bus.$off("musicEnd", this.musicEnd);
  },
  methods: {
    musicEnd() {
      console.log("歌词--musicEnd");
      this.lyrIdx = 0;
    },
    findIdx(time) {
      let item = null;
      for (let i = 0; i < this.len; i++) {
        item = this.lyric[i];
        if (!(time > item[0]) && time <= item[0]) {
          this.lyrIdx = i;
          return;
        }
      }
    },
    lyrScroll(curIdx) {
      if (lyricEl == null) {
        lyricEl = document.querySelector(".lyricRoot");
        listEl = lyricEl.querySelectorAll(".lyricItem");
        height = listEl[0].offsetTop - lyricEl.offsetTop;
      }
      const el = listEl[curIdx - 3];
      if (el) {
        const distance = el.offsetTop - lyricEl.offsetTop;
        lyricEl.scrollTo({
          behavior: "smooth",
          top: distance - height
        });
      }
    }
  },
  watch: {
    "$store.state.musicId"() {
      this.lyrIdx = 0;
    },
    lyric(lyric) {
      console.log("获取歌词");
      if (lyric.length) {
        this.$nextTick(() => {
          this.findIdx(this.$store.state.currentTime);
          this.lyrScroll(this.lyrIdx);
        });
      }
    },
    isMusicDetailCardShow(isShow) {
      if (isShow && this.lyric.length) {
        console.log("2次打开");
        if (lyricEl) {
          listEl = lyricEl.querySelectorAll(".lyricItem");
        }
        this.$nextTick(() => {
          this.findIdx(this.$store.state.currentTime);
          this.lyrScroll(this.lyrIdx);
        });
      }
    },
    "$store.state.currentTime"(time, last) {
      if (this.isMusicDetailCardShow && this.len) {
        if ((last && Math.abs(time - last) > 3) || this.lyrIdx === 0) {
          console.log("跳转");
          this.findIdx(time);
          this.lyrScroll(this.lyrIdx);
        }
        const item = this.lyric[this.lyrIdx];
        if (item) {
          if (time >= item[0]) {
            this.lyrIdx += 1;
            this.lyrScroll(this.lyrIdx);
          }
        }
      }
    }
  }
};
</script>

<style scoped  >
.lyricRoot {
  width: 100%;
  height: 275px;
  font-size: 12px;
  text-align: center;
  overflow-y: scroll;
}
.lyricRoot::-webkit-scrollbar {
  display: none;
}
.placeholder {
  height: 40px;
}
.lyricItem {
  margin-top: 15px;
  height: 22px;
  line-height: 22px;
  transition: all 0.5s;
}
.curLyr {
  font-size: 14px;
  font-weight: 600;
  color: blueviolet;
}
</style>
